<!DOCTYPE html>
<html lang="zh">

<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>结算订单 - 百货购物平台</title>
    <link rel="stylesheet" href="layui-v2.9.20/layui/css/layui.css">
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: "Microsoft YaHei", "PingFang SC", sans-serif;
        }

        body {
            background-color: #fafafa;
        }


        .address-card {
            padding: 15px;
            margin-bottom: 15px;
            border: 1px solid #e0e0e0;
            border-radius: 8px;
            background: #fff;
            cursor: pointer;
            transition: all 0.3s ease;
        }

        .address-card.selected {
            border-color: #ff6700;
            background-color: #fff8f0;
        }

        .address-card.selected-highlight {
            border: 2px solid #1890ff;
            box-shadow: 0 0 0 2px rgba(24, 144, 255, 0.2);
        }

        .address-card:hover {
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
        }

        /* 顶部导航栏 */
        .header-container {
            display: flex;
            justify-content: space-between;
            align-items: center;
            background: linear-gradient(135deg, #ffecef 0%, #fff0f3 100%);
            padding: 0 40px;
            box-shadow: 0 4px 20px rgba(255, 156, 176, 0.15);
            position: relative;
            z-index: 1000;
            height: 70px;
            border-bottom: 1px solid #ffdde4;
        }

        .logo {
            display: flex;
            align-items: center;
            font-size: 28px;
            font-weight: 800;
            color: #ff4d7a;
            text-shadow: 1px 1px 3px rgba(255, 77, 122, 0.2);
        }

        .logo i {
            margin-right: 10px;
            font-size: 32px;
        }

        .nav-menu {
            display: flex;
            list-style: none;
            height: 100%;
        }

        .nav-menu li {
            display: flex;
            align-items: center;
            position: relative;
            padding: 0 20px;
            cursor: pointer;
            transition: all 0.3s ease;
            height: 100%;
        }

        .nav-menu li a {
            text-decoration: none;
            color: #ff4d7a;
            font-size: 16px;
            font-weight: 600;
            display: flex;
            align-items: center;
            height: 100%;
            padding: 0 5px;
            transition: all 0.3s;
        }

        .nav-menu li a i {
            margin-right: 8px;
            font-size: 18px;
        }

        .nav-menu li:hover {
            background: rgba(255, 255, 255, 0.5);
        }

        .nav-menu li.active {
            background: linear-gradient(to bottom, rgba(255, 255, 255, 0.8), rgba(255, 255, 255, 0.4));
        }

        .nav-menu li.active::after {
            content: '';
            position: absolute;
            bottom: 0;
            left: 0;
            right: 0;
            height: 3px;
            background: linear-gradient(to right, #ff8da1, #ff4d7a);
            border-radius: 3px 3px 0 0;
        }

        .nav-menu li.active a {
            color: #e6004c;
        }

        /* 搜索框样式 */
        .search-container {
            background-color: #fff;
            padding: 0;
            position: sticky;
            top: 0;
            z-index: 999;
            box-shadow: 0 2px 15px rgba(0, 0, 0, 0.05);
            border-bottom: 1px solid #f0f0f0;
            display: flex;
            justify-content: center;
            align-items: center;
            height: 90px;
        }

        .search-box {
            width: 700px;
            margin: 0 auto;
            display: flex;
            border: 2px solid #ff4d7a;
            border-radius: 8px;
            overflow: hidden;
            box-shadow: 0 5px 15px rgba(255, 77, 122, 0.2);
            height: 52px;
        }

        .search-select {
            padding: 0 15px;
            background: #fff;
            border: none;
            border-right: 1px solid #eee;
            outline: none;
            color: #ff4d7a;
            font-weight: 500;
            width: 130px;
            appearance: none;
            background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23ff4d7a' d='M7 10l5 5 5-5z'/%3E%3C/svg%3E");
            background-repeat: no-repeat;
            background-position: right 10px center;
            background-size: 16px;
            cursor: pointer;
        }

        .search-select:focus {
            background-color: #fff9fb;
        }

        .search-input-container {
            flex: 1;
            display: flex;
            align-items: center;
            position: relative;
        }

        .search-input {
            flex: 1;
            border: none;
            padding: 0 20px 0 45px;
            font-size: 16px;
            outline: none;
            color: #333;
            height: 100%;
        }

        .search-icon {
            position: absolute;
            left: 15px;
            color: #999;
            font-size: 18px;
        }

        .search-button {
            background: linear-gradient(135deg, #ff4d7a 0%, #ff8da1 100%);
            color: white;
            border: none;
            padding: 0 35px;
            font-size: 17px;
            font-weight: 600;
            cursor: pointer;
            transition: all 0.3s;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .search-button:hover {
            background: linear-gradient(135deg, #ff3366 0%, #ff7799 100%);
        }

        /* 内容容器 */
        .content-container {
            max-width: 1200px;
            margin: 40px auto;
            padding: 0 20px;
            display: flex;
            flex-direction: column;
            gap: 30px;
        }

        .section-title {
            position: relative;
            font-size: 26px;
            margin: 10px 0 25px;
            padding-left: 15px;
            color: #ff4d7a;
            font-weight: 700;
        }

        .section-title::before {
            content: '';
            position: absolute;
            left: 0;
            top: 8px;
            bottom: 8px;
            width: 5px;
            background: linear-gradient(to bottom, #ff8da1, #ff4d7a);
            border-radius: 5px;
        }

        /* 地址选择区域 */
        .address-container {
            background: #fff;
            border-radius: 12px;
            box-shadow: 0 5px 25px rgba(255, 141, 161, 0.15);
            padding: 25px;
        }

        .address-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 20px;
        }

        .address-title {
            font-size: 20px;
            font-weight: 700;
            color: #ff4d7a;
        }

        .add-address-btn {
            background: linear-gradient(135deg, #ff4d7a 0%, #ff8da1 100%);
            color: white;
            border: none;
            padding: 8px 20px;
            border-radius: 5px;
            font-size: 14px;
            font-weight: 600;
            cursor: pointer;
            transition: all 0.3s;
            display: flex;
            align-items: center;
            gap: 8px;
        }

        .add-address-btn:hover {
            background: linear-gradient(135deg, #ff3366 0%, #ff7799 100%);
            transform: translateY(-2px);
        }

        .address-list {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
            gap: 20px;
        }

        .address-card {
            border: 1px solid #ffdde4;
            border-radius: 10px;
            padding: 20px;
            background: #fff;
            cursor: pointer;
            transition: all 0.3s;
            position: relative;
        }

        .address-card:hover {
            border-color: #ff8da1;
            box-shadow: 0 5px 15px rgba(255, 141, 161, 0.1);
        }

        .address-card.selected {
            border: 2px solid #ff4d7a;
            background: #fff9fb;
        }

        .address-card.selected::after {
            content: '\f00c';
            font-family: 'Font Awesome 5 Free';
            font-weight: 900;
            position: absolute;
            top: -12px;
            right: -12px;
            width: 24px;
            height: 24px;
            background: #ff4d7a;
            color: white;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 12px;
        }

        .address-name {
            font-size: 18px;
            font-weight: 600;
            color: #333;
            margin-bottom: 5px;
            display: flex;
            align-items: center;
            gap: 10px;
        }

        .default-tag {
            background: linear-gradient(135deg, #ff4d7a 0%, #ff8da1 100%);
            color: white;
            padding: 3px 8px;
            border-radius: 4px;
            font-size: 12px;
            font-weight: 500;
        }

        .address-info {
            font-size: 14px;
            color: #666;
            line-height: 1.6;
            margin-bottom: 10px;
        }

        .address-phone {
            color: #ff4d7a;
            font-weight: 600;
        }

        .address-actions {
            display: flex;
            gap: 15px;
            margin-top: 15px;
        }

        .address-action {
            color: #999;
            font-size: 14px;
            cursor: pointer;
            transition: color 0.3s;
            display: flex;
            align-items: center;
            gap: 5px;
        }

        .address-action:hover {
            color: #ff4d7a;
        }

        /* 商品信息区域 */
        .products-container {
            background: #fff;
            border-radius: 12px;
            box-shadow: 0 5px 25px rgba(255, 141, 161, 0.15);
            padding: 25px;
        }

        .products-header {
            display: flex;
            padding: 15px 20px;
            background: #fff9fb;
            border-radius: 10px;
            margin-bottom: 15px;
            font-weight: 600;
            color: #ff4d7a;
        }

        .products-header>div {
            text-align: center;
        }

        .products-header .product-info {
            width: 50%;
            text-align: left;
        }

        .products-header .price,
        .products-header .quantity,
        .products-header .subtotal {
            width: 16.66%;
        }

        .product-item {
            display: flex;
            align-items: center;
            padding: 20px;
            border-bottom: 1px solid #f0f0f0;
        }

        .product-item>div {
            text-align: center;
        }

        .product-item .product-info {
            width: 50%;
            display: flex;
            align-items: center;
            text-align: left;
        }

        .product-item .product-info img {
            width: 80px;
            height: 80px;
            object-fit: cover;
            border-radius: 8px;
            margin-right: 20px;
        }

        .product-item .product-info .title {
            font-size: 16px;
            color: #333;
            margin-bottom: 5px;
        }

        .product-item .product-info .spec {
            font-size: 14px;
            color: #888;
        }

        .product-item .price,
        .product-item .quantity,
        .product-item .subtotal {
            width: 16.66%;
        }

        .product-item .price {
            color: #ff4d7a;
            font-weight: 600;
        }

        .product-item .subtotal {
            color: #ff4d7a;
            font-weight: 700;
            font-size: 18px;
        }

        /* 价格明细 */
        .summary-container {
            background: #fff;
            border-radius: 12px;
            box-shadow: 0 5px 25px rgba(255, 141, 161, 0.15);
            padding: 25px;
            margin-bottom: 30px;
        }

        .summary-title {
            font-size: 20px;
            font-weight: 700;
            color: #ff4d7a;
            margin-bottom: 20px;
        }

        .price-detail {
            width: 100%;
            border-collapse: collapse;
        }

        .price-detail tr {
            height: 40px;
        }

        .price-detail td {
            padding: 8px 15px;
            border-bottom: 1px dashed #f0f0f0;
        }

        .price-detail .label {
            color: #666;
            font-size: 15px;
        }

        .price-detail .value {
            color: #333;
            font-weight: 500;
            text-align: right;
        }

        .price-detail .total .label {
            font-size: 18px;
            font-weight: 700;
            color: #333;
        }

        .price-detail .total .value {
            font-size: 24px;
            font-weight: 800;
            color: #ff4d7a;
        }

        .payment-method {
            margin-top: 25px;
            padding-top: 20px;
            border-top: 1px solid #f0f0f0;
        }

        .payment-title {
            font-size: 18px;
            font-weight: 600;
            color: #333;
            margin-bottom: 15px;
        }

        .payment-options {
            display: flex;
            gap: 15px;
        }

        .payment-option {
            border: 1px solid #ddd;
            border-radius: 8px;
            padding: 15px 20px;
            display: flex;
            align-items: center;
            gap: 10px;
            cursor: pointer;
            transition: all 0.3s;
            flex: 1;
        }

        .payment-option.selected {
            border: 2px solid #ff4d7a;
            background: #fff9fb;
        }

        .payment-icon {
            font-size: 24px;
            color: #ff4d7a;
        }

        .payment-text {
            font-weight: 500;
        }

        .submit-order {
            background: linear-gradient(135deg, #ff4d7a 0%, #ff8da1 100%);
            color: white;
            border: none;
            padding: 15px 40px;
            border-radius: 8px;
            font-size: 18px;
            font-weight: 600;
            cursor: pointer;
            transition: all 0.3s;
            box-shadow: 0 5px 15px rgba(255, 77, 122, 0.3);
            display: block;
            width: 100%;
            margin-top: 30px;
        }

        .submit-order:hover {
            background: linear-gradient(135deg, #ff3366 0%, #ff7799 100%);
            transform: translateY(-2px);
        }

        /* 页脚样式 */
        .footer {
            background: linear-gradient(135deg, #343a40 0%, #23272b 100%);
            color: #fff;
            padding: 50px 0 30px;
            margin-top: 70px;
        }

        .footer-content {
            max-width: 1200px;
            margin: 0 auto;
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            gap: 35px;
            padding: 0 20px;
        }

        .footer-column h3 {
            font-size: 20px;
            margin-bottom: 22px;
            padding-bottom: 12px;
            border-bottom: 2px solid #ff4d7a;
            color: #fff;
        }

        .footer-column ul {
            list-style: none;
        }

        .footer-column li {
            margin-bottom: 14px;
        }

        .footer-column a {
            color: #ddd;
            text-decoration: none;
            transition: all 0.3s;
            display: flex;
            align-items: center;
        }

        .footer-column a i {
            margin-right: 8px;
            color: #ff8da1;
        }

        .footer-column a:hover {
            color: #ff8da1;
            transform: translateX(5px);
        }

        .copyright {
            text-align: center;
            padding-top: 40px;
            margin-top: 40px;
            border-top: 1px solid #444;
            color: #aaa;
            font-size: 14px;
            max-width: 1200px;
            margin: 40px auto 0;
        }

        /* 响应式调整 */
        @media (max-width: 992px) {
            .footer-content {
                grid-template-columns: repeat(2, 1fr);
            }

            .address-list {
                grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
            }
        }

        @media (max-width: 768px) {
            .header-container {
                flex-direction: column;
                height: auto;
                padding: 15px;
            }

            .nav-menu {
                width: 100%;
                margin-top: 15px;
                justify-content: center;
            }

            .nav-menu li {
                padding: 10px 15px;
            }

            .search-box {
                width: 90%;
            }

            .products-header {
                display: none;
            }

            .product-item {
                flex-wrap: wrap;
                position: relative;
            }

            .product-item .product-info {
                width: 100%;
                margin-bottom: 15px;
            }

            .product-item .price,
            .product-item .quantity,
            .product-item .subtotal {
                width: 33.33%;
                margin-bottom: 10px;
                text-align: left;
            }

            .payment-options {
                flex-direction: column;
            }
        }

        @media (max-width: 576px) {
            .nav-menu {
                flex-wrap: wrap;
            }

            .nav-menu li {
                padding: 8px 12px;
            }

            .search-box {
                flex-direction: column;
                border-radius: 15px;
                height: auto;
            }

            .search-select {
                width: 100%;
                padding: 12px 20px;
                border-right: none;
                border-bottom: 1px solid #eee;
                height: 50px;
            }

            .search-input-container {
                width: 100%;
            }

            .search-input {
                padding: 12px 20px 12px 45px;
                height: 50px;
            }

            .search-icon {
                left: 20px;
            }

            .search-button {
                padding: 15px;
                height: 50px;
            }

            .footer-content {
                grid-template-columns: 1fr;
            }
        }
    </style>
</head>

<body>
    <!-- 顶部导航栏 -->
    <div class="header-container">
        <div class="logo">
            <i class="fas fa-shopping-bag"></i>
            <span>百货购物平台</span>
        </div>
        <ul class="nav-menu">
            <li>
                <a href="index.html"><i class="fas fa-home"></i> 首页</a>
            </li>
            <li>
                <a href="cart item.html"><i class="fas fa-shopping-cart"></i> 购物车</a>
            </li>
            <li class="active">
                <a href="checkout.html"><i class="fas fa-cash-register"></i> 结算</a>
            </li>
            <li>
                <a href="order.html"><i class="fas fa-file-invoice"></i> 我的订单</a>
            </li>
            <li>
                <a href="person_center.html"><i class="fas fa-user-circle"></i> 个人中心</a>
            </li>
            <li>
                <a href="customer_service.html"><i class="fas fa-headset"></i> 官方客服</a>
            </li>
        </ul>
    </div>

    <!-- 搜索框 -->
    <div class="search-container">
        <div class="search-box">
            <select class="search-select">
                <option value="" disabled selected>全部商品</option>
                <option value="AAA">女装</option>
                <option value="BBB">男装</option>
                <option value="CCC">美妆</option>
                <option value="DDD">数码</option>
                <option value="EEE">食品</option>
            </select>
            <div class="search-input-container">
                <i class="fas fa-search search-icon"></i>
                <input type="text" class="search-input" placeholder="输入搜索关键字...">
            </div>
            <button class="search-button">搜索</button>
        </div>
    </div>

    <!-- 内容容器 -->
    <div class="content-container">
        <h2 class="section-title">结算订单</h2>

        <!-- 收货地址区域 -->

        <div class="address-header">
            <div class="address-title">收货地址</div>
            <button class="add-address-btn">
                <i class="fas fa-plus"></i> 添加新地址
            </button>
        </div>
        <div class="address-container">
            <div class="address-list">
                <div class="address-card selected">
                    <div class="address-name">
                        张小姐
                        <span class="default-tag">默认</span>
                    </div>
                    <div class="address-info">
                        <div class="address-phone">135****1234</div>
                        <div>北京市朝阳区建国路88号SOHO现代城C座1806室</div>
                    </div>
                    <div class="address-actions">
                        <div class="address-action"><i class="fas fa-edit"></i> 编辑</div>
                        <div class="address-action"><i class="fas fa-trash"></i> 删除</div>
                    </div>
                </div>


            </div>
        </div>




        <!-- 商品信息区域 -->
        <div class="products-container">
            <div class="products-header">
                <div class="product-info">商品信息</div>
                <div class="price">单价</div>
                <div class="quantity">数量</div>
                <div class="subtotal">小计</div>
            </div>

            <div class="product-item">
                <div class="product-info">
                    <img src="https://images.unsplash.com/photo-1542838132-92c53300491e?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=300&q=80"
                        alt="水果">
                    <div>
                        <div class="title">进口新鲜水果礼盒 当季水果组合装</div>
                        <div class="spec">规格：精品礼盒装</div>
                    </div>
                </div>
                <div class="price">¥128.00</div>
                <div class="quantity">1</div>
                <div class="subtotal">¥128.00</div>
            </div>

            <div class="product-item">
                <div class="product-info">
                    <img src="https://images.unsplash.com/photo-1565958011703-44f9829ba187?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=300&q=80"
                        alt="舒芙蕾">
                    <div>
                        <div class="title">法式舒芙蕾甜点 新鲜制作 松软可口</div>
                        <div class="spec">规格：4个装</div>
                    </div>
                </div>
                <div class="price">¥45.00</div>
                <div class="quantity">2</div>
                <div class="subtotal">¥90.00</div>
            </div>

            <div class="product-item">
                <div class="product-info">
                    <img src="https://images.unsplash.com/photo-1585155770447-2f66e2a397b5?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=300&q=80"
                        alt="智能手表">
                    <div>
                        <div class="title">智能运动手表 心率监测 GPS定位</div>
                        <div class="spec">颜色：黑色</div>
                    </div>
                </div>
                <div class="price">¥899.00</div>
                <div class="quantity">1</div>
                <div class="subtotal">¥899.00</div>
            </div>
        </div>

        <!-- 价格明细 -->
        <div class="summary-container">
            <div class="summary-title">价格明细</div>

            <table class="price-detail">
                <tr>
                    <td class="label">商品总价</td>
                    <td class="value">¥1117.00</td>
                </tr>
                <tr class="total">
                    <td class="label">应付总额</td>
                    <td class="value">¥999.98</td>
                </tr>
            </table>

            <div class="payment-method">
                <div class="payment-title">支付方式</div>
                <div class="payment-options">
                    <div class="payment-option" data-pay-type="2"> <!-- 支付宝 -->
                        <i class="fab fa-alipay payment-icon"></i>
                        <div class="payment-text">支付宝支付</div>
                    </div>
                    <div class="payment-option" data-pay-type="1"> <!-- 微信 -->
                        <i class="fab fa-weixin payment-icon"></i>
                        <div class="payment-text">微信支付</div>
                    </div>
                    <div class="payment-option" data-pay-type="3"> <!-- 银行卡 -->
                        <i class="fas fa-credit-card payment-icon"></i>
                        <div class="payment-text">银行卡支付</div>
                    </div>
                </div>
            </div>

            <button class="submit-order">提交订单</button>
        </div>
    </div>
    </div>
    <!-- 页脚 -->
    <div class="footer">
        <div class="footer-content">
            <div class="footer-column">
                <h3>购物指南</h3>
                <ul>
                    <li><a href="#"><i class="fas fa-shopping-cart"></i> 购物流程</a></li>
                    <li><a href="#"><i class="fas fa-crown"></i> 会员介绍</a></li>
                    <li><a href="#"><i class="fas fa-question-circle"></i> 常见问题</a></li>
                    <li><a href="#"><i class="fas fa-comments"></i> 联系客服</a></li>
                </ul>
            </div>
            <div class="footer-column">
                <h3>支付方式</h3>
                <ul>
                    <li><a href="#"><i class="fab fa-weixin"></i> 微信支付</a></li>
                    <li><a href="#"><i class="fab fa-alipay"></i> 支付宝</a></li>
                    <li><a href="#"><i class="fas fa-credit-card"></i> 银行卡支付</a></li>
                    <li><a href="#"><i class="fas fa-truck"></i> 货到付款</a></li>
                </ul>
            </div>
            <div class="footer-column">
                <h3>配送服务</h3>
                <ul>
                    <li><a href="#"><i class="fas fa-map-marker-alt"></i> 配送范围</a></li>
                    <li><a href="#"><i class="fas fa-clock"></i> 配送时间</a></li>
                    <li><a href="#"><i class="fas fa-tag"></i> 配送费用</a></li>
                    <li><a href="#"><i class="fas fa-search"></i> 物流查询</a></li>
                </ul>
            </div>
            <div class="footer-column">
                <h3>售后服务</h3>
                <ul>
                    <li><a href="#"><i class="fas fa-exchange-alt"></i> 退换货政策</a></li>
                    <li><a href="#"><i class="fas fa-money-bill-wave"></i> 退款说明</a></li>
                    <li><a href="#"><i class="fas fa-shield-alt"></i> 保修政策</a></li>
                    <li><a href="#"><i class="fas fa-comment-dots"></i> 投诉建议</a></li>
                </ul>
            </div>
        </div>
        <div class="copyright">
            © 2023 百货购物平台 版权所有 | 客服电话：400-123-4567 | 邮箱：service@baihuo.com
        </div>
    </div>

    <script src="layui-v2.9.20/layui/layui.js"></script>
    <script>
        // 地址选择功能
        // document.querySelectorAll('.address-card').forEach(card => {
        //     card.addEventListener('click', function() {
        //         document.querySelectorAll('.address-card').forEach(c => {
        //             c.classList.remove('selected');
        //         });
        //         this.classList.add('selected');
        //     });
        // });
        let list = [];
        // 4. 组装 order 对象

        function renderCartItems(productList) {
            const container = document.querySelector('.products-container'); // 需要一个容器元素
            let list = [];
            // 清空容器
            container.innerHTML = '';
            list = productList;
            // 遍历商品数据并生成HTML
            productList.forEach(product => {
                const subtotal = product.productPrice * product.quantity;
                const productElement = document.createElement('div');
                productElement.className = 'product-item';
                productElement.innerHTML = `
      <div class="product-info">
        <img src="" alt="${product.productTitle}">
        <div>
          <div class="title">${product.productTitle}</div>
        </div>
      </div>
      <div class="price">${product.productPrice}</div>
      <div class="quantity-control">
        <span class="quantity">${product.quantity}</span>

      </div>
      <div class="subtotal">${subtotal}</div>
    `;

                container.appendChild(productElement);
            });
        }
        function getBackendBaseUrl() {
            // 根据当前环境确定后端URL
            if (window.location.hostname === 'localhost' || window.location.hostname === '127.0.0.1') {
                return 'http://localhost:8080';
            }
            // 生产环境使用相同域名
            return window.location.origin;
        }
        const user = JSON.parse(localStorage.getItem('user'));
        let order = {
            totalPrice: '',
            payType: '',
            userId: user.userId
        };
        const item = [
            {
                id: 10,
                productId: 1,
                productPrice: 200,
                productStock: 8,
                productTitle: "热销商品 - 超薄笔记本电脑",
                quantity: 3,
                selected: true,
                userId: 17
            }
        ];
        function calculateSubtotal(product) {
            return (product.productPrice || 0) * (product.quantity || 1);
        }

        function calculateTotal(productList) {
            return productList.reduce((sum, product) => {
                return sum + calculateSubtotal(product);
            }, 0);
        }
        function getCartList(userId) {
            $.ajax({
                url: getBackendBaseUrl() + "/cart/list",
                method: 'GET',
                contentType: 'application/json',
                xhrFields: { withCredentials: true },
                data: {
                    userId: user.userId
                },
                success: function (data) {
                    list = data.data;
                    if (data.code === 200) {
                        renderCartItems(data.data);
                        renderPriceSummary(data.data);
                        order.totalPrice = calculateTotal(data.data);
                    } else {
                        // 请求失败
                        showStatusMessage('获取购物车失败: ' + data.message, false);
                    }
                },
                error: function (xhr, status, error) {
                    console.error('请求失败:', error);
                    showStatusMessage('网络错误，请稍后重试', false);
                }
            });
        }

        function renderPriceSummary(productList) {
            const total = calculateTotal(productList);

            const priceDetailHTML = `
    <tr>
      <td class="label">商品总价</td>
      <td class="value">${total}</td>
    </tr>
    <tr class="total">
      <td class="label">应付总额</td>
      <td class="value">${total}</td>
    </tr>
  `;

            document.querySelector('.price-detail').innerHTML = priceDetailHTML;
        }




        // 支付方式选择
        document.querySelectorAll('.payment-option').forEach(option => {
            option.addEventListener('click', function () {
                document.querySelectorAll('.payment-option').forEach(o => {
                    o.classList.remove('selected');
                });
                this.classList.add('selected');
            });
        });
        document.addEventListener('DOMContentLoaded', function () {
            document.body.addEventListener('click', function (e) {
                if (e.target.classList.contains('add-address-btn')) {
                    layer.open({
                        type: 1,
                        title: '添加新地址',
                        area: ['500px', '450px'], // 高度调整为450px
                        content: `
                <div style="padding: 20px;">
                    <form class="layui-form" id="address-form">
                        <div class="layui-form-item">
                            <label class="layui-form-label">收货人</label>
                            <div class="layui-input-block">
                                <input type="text" name="receiverName" class="layui-input" lay-verify="required" placeholder="请输入收货人姓名">
                            </div>
                        </div>
                        <div class="layui-form-item">
                            <label class="layui-form-label">手机号码</label>
                            <div class="layui-input-block">
                                <input type="text" name="receiverPhone" class="layui-input" lay-verify="required|phone" placeholder="请输入手机号码">
                            </div>
                        </div>
                        <div class="layui-form-item">
                            <label class="layui-form-label">所在地区</label>
                            <div class="layui-input-block">
                                <input type="text" name="region" class="layui-input" lay-verify="required" placeholder="请输入省市区">
                            </div>
                        </div>
                        <div class="layui-form-item">
                            <label class="layui-form-label">详细地址</label>
                            <div class="layui-input-block">
                                <textarea name="detailAddress" class="layui-textarea" lay-verify="required" placeholder="请输入详细地址"></textarea>
                            </div>
                        </div>
                        <div class="layui-form-item">
                            <div class="layui-input-block">
                                <input type="checkbox" name="isDefault" lay-skin="primary" title="设为默认地址">
                            </div>
                        </div>
                        <div class="layui-form-item">
                            <div class="layui-input-block">
                                <button class="layui-btn layui-btn-fluid" lay-submit type="submit" lay-filter="address-submit" 
                                        style="background: linear-gradient(135deg, #ff4d7a 0%, #ff8da1 100%);">保存地址</button>
                            </div>
                        </div>
                    </form>
                </div>
                `,
                        success: function (layero, index) {
                            layui.use(['form', 'layer'], function () {
                                const form = layui.form;
                                const layer = layui.layer;

                                // 表单提交
                                form.on('submit(address-submit)', function (data) {
                                    // 构造地址对象
                                    const address = {
                                        consignee: data.field.receiverName,
                                        phone: data.field.receiverPhone,
                                        address: `${data.field.region} ${data.field.detailAddress}`,
                                        isDefault: data.field.isDefault === 'on' ? 1 : 0,
                                        userId: user.userId,
                                    };
                                    // 显示加载中
                                    const loadIndex = layer.load(1);

                                    // 提交到后端
                                    fetch(getBackendBaseUrl() + "/address/add", {
                                        method: 'POST',
                                        headers: {
                                            'Content-Type': 'application/json',
                                            'userId': user.userId
                                        },
                                        body: JSON.stringify(address)
                                    })
                                        .then(response => response.json())
                                        .then(data => {
                                            // layer.close(loadIndex);

                                            if (data.code === 200) {
                                                layer.msg('地址添加成功', { icon: 1 });
                                                // 关闭弹窗
                                                layer.closeAll();
                                                // 刷新地址列表
                                                if (typeof getAddressList === 'function') {
                                                    getAddressList();
                                                }
                                            } else {
                                                layer.msg(data.message || '地址添加失败', { icon: 2 });
                                            }
                                        })
                                        .catch(error => {
                                            setTimeout(function () {
                                            }, 3000);
                                            layer.close(loadIndex);
                                            layer.msg('网络错误，请稍后重试', { icon: 2 });
                                        });

                                    return false;
                                });

                                form.render();
                            });
                        }
                    });
                }
            });
        });



        function getAddressList() {
            return $.ajax({
                url: getBackendBaseUrl() + "/address/list",
                method: 'GET',
                contentType: 'application/json',
                //todo
                headers: {
                    'userId': user.userId
                },
                xhrFields: { withCredentials: true },
                success: function (data) {
                    console.log('地址数据:', data);

                    if (data.code === 200) {
                        renderAddressList(data.data);
                    } else {
                        showStatusMessage('获取地址失败: ' + data.message, false);
                    }
                    return data;
                },
                error: function (xhr, status, error) {
                    console.error('请求失败:', error);
                    showStatusMessage('网络错误，请稍后重试', false);
                    throw error;
                }
            });
        }

        function renderAddressList(addressList) {
            const $addressContainer = $('.address-container');
            $addressContainer.empty();

            if (!addressList || addressList.length === 0) {
                $addressContainer.html(`
            <div class="no-address">
                <button class="add-address-btn">+ 添加新地址</button>
            </div>
        `);
                return;
            }

            addressList.forEach(address => {
                const addressHtml = `
            <div class="address-card ${address.isDefault ? 'selected' : ''}" data-address-id="${address.id}">
                <div class="address-name">
                    ${address.consignee}
                    ${address.isDefault ? '<span class="default-tag">默认</span>' : ''}
                </div>
                <div class="address-info">
                    <div class="address-phone">${address.phone}</div>
                    <div>${address.address}</div>
                </div>
                <div class="address-actions">
                    <div class="address-action btn-edit-address" data-address-id="${address.id}">
                        <i class="fas fa-edit"></i> 编辑
                    </div>
                    <div class="address-action btn-delete-address" data-address-id="${address.id}">
                        <i class="fas fa-trash"></i> 删除
                    </div>
                    ${!address.isDefault ? `
                    <div class="address-action btn-set-default" data-address-id="${address.id}">
                        <i class="fas fa-check-circle"></i> 设为默认
                    </div>
                    ` : ''}
                </div>
            </div>
        `;
                $addressContainer.append(addressHtml);
            });

            $('.address-card').on('click', function (e) {
                if ($(e.target).closest('.address-actions').length) {
                    return;
                }
                $('.address-card').removeClass('selected-highlight');
                $(this).addClass('selected-highlight');
                const selectedAddressId = $(this).data('address-id');
                console.log('选中的地址ID:', selectedAddressId);
            });
        }

        const requestData = {
            order: '',
            cartItemIds: '',
            addressId: ''
        };




        document.querySelector('.submit-order').addEventListener('click', function () {
            // 1. 获取高亮选中的收货地址ID
            const selectedAddressCard = document.querySelector('.address-card.selected-highlight')
                || document.querySelector('.address-card.selected');
            const addressId = selectedAddressCard ? selectedAddressCard.getAttribute('data-address-id') : null;
            if (!addressId) {
                layer.msg('请选择收货地址', { icon: 2 });
                return;
            }
            const productIds = list.map(item => item.productId);
            const cartItemIds = list.map(item => item.id);
            if (!cartItemIds.length) {
                layer.msg('购物车为空', { icon: 2 });
                return;
            }
            function getSelectedPayType() {
                const selected = document.querySelector('.payment-option.selected');
                return selected ? selected.getAttribute('data-pay-type') : null;
            }
            // 3. 获取支付方式
            const payType = getSelectedPayType();
            if (!payType) {
                layer.msg('请选择支付方式', { icon: 2 });
                return;
            }

            // 5. 发送请求
            layer.confirm('确定提交订单吗？', {
                title: '确认订单',
                btn: ['确认支付', '再想想'],
                skin: 'layui-layer-molv'
            }, function () {
                const url = getBackendBaseUrl() + "/order/create?cartItemIds=" + productIds.join(',') + "&addressId=" + addressId;
                $.ajax({
                    url: url,
                    method: 'POST',
                    contentType: 'application/json',
                    xhrFields: { withCredentials: true },
                    headers: {
                        'userId': user.userId
                    },
                    data: JSON.stringify(order),
                    success: function (data) {
                        if (data.code === 200) {
                            layer.msg('订单创建成功', { icon: 1 });
                            $.ajax({
                                url: getBackendBaseUrl() + "/cart/clear?userId=" + user.userId,
                                method: 'DELETE',
                                contentType: 'application/json',
                                xhrFields: { withCredentials: true },
                                success: function (data) {
                                },
                                error: function (xhr, status, error) {
                                    layer.msg('网络错误，请稍后重试', { icon: 2 });
                                }
                            });
                            setTimeout(function () {
                                window.location.href = '/springboot_shopping/main/webapp/order.html';
                            }, 1500);
                        } else {
                            layer.msg('订单创建失败: ' + data.message, { icon: 2 });
                        }
                    },
                    error: function (xhr, status, error) {
                        layer.msg('网络错误，请稍后重试', { icon: 2 });
                    }
                });
            });


        });


        document.addEventListener('DOMContentLoaded', function () {
            getCartList(user.userId);
            getAddressList()
        });
    </script>
</body>

</html>